<script setup>
import { ref, onUnmounted } from 'vue';
import { ElInput } from 'element-plus'
import MessageBox from '@/utils/MessageBox';

import { registerSendCode } from '@/api/account.js'

const timer = ref(null)
const buttonText = ref('获取验证码')
const countdownTime = ref(60)
const isCounting = ref(false)


const emit = defineEmits(['submit', 'click_login'])

const formData = ref({
    username: '',
    password: ''
})


function submit(e){
    e.preventDefault();
    if(!formData.value.mail){
        MessageBox.warning("请输入邮箱")
        return
    }
    if(!formData.value.code){
        MessageBox.warning("请输入验证码")
        return
    }
    if(!formData.value.password){
        MessageBox.warning("请输入密码")
        return
    }
    if(formData.value.password.length<4 ){
        MessageBox.warning("密码长度不能小于4 ")
        return
    }

    if(!formData.value.password1){
        MessageBox.warning("请输入确认密码")
        return
    }
    if(formData.value.password != formData.value.password1){
        MessageBox.warning("两次密码不一样")
        return
    }
    
    
    emit('submit', formData.value)
    

}

const sendCode = async ()=>{

    if (!formData.value.mail){
        MessageBox.warning('请输入邮箱')
        return 
    }

    if (!isCounting.value){
        
        var req_data = {
            mail: formData.value.mail
        }
        var res = await registerSendCode(req_data)
        if (res.code != 1){
            return
        }
        MessageBox.success('发送成功！')

        isCounting.value = true
        buttonText.value = `${countdownTime.value}秒`
        timer.value = setInterval(()=>{
            countdownTime.value -= 1
            buttonText.value = `${countdownTime.value}秒`
            if (countdownTime.value === 0){
                clearInterval(timer.value)
                timer.value = null
                isCounting.value = false
                buttonText.value = '获取验证码'
                countdownTime.value = 60
            }
        }, 1000)

    }
    
}

const click_login = ()=>{
    emit('click_login')
}

onUnmounted(()=>{
    if(timer.value){
        clearInterval(timer.value)
    }
})


</script>

<template>
    <form class="login__form" @submit="submit($event)">

        <div class="form__row">
            <div class="form__plot"><div class="form__label">邮箱</div></div>
            <div class="form__control"><el-input type="text" v-model.trim="formData.mail" placeholder="请输入邮箱" /></div>
        </div>

        <div class="form__row">
            <div class="form__auth_code">
                <el-input type="text" v-model.trim="formData.code" placeholder="请输入验证码" />
                <span  class="code__btn"><el-button :disabled="isCounting" @click="sendCode"  class="btn">{{buttonText}}</el-button></span>
            </div>
        </div>


        <div class="form__row">
            <div class="form__plot"><div class="form__label">密码</div></div>
            <div class="form__control"><el-input type="password" v-model.trim="formData.password" placeholder="请输入密码"  show-password/></div>
        </div>
        <div class="form__row">
            <div class="form__plot"><div class="form__label">确认密码</div></div>
            <div class="form__control"><el-input type="password" v-model.trim="formData.password1" placeholder="请输入确认密码"  show-password/></div>
        </div>
        <div class="form__row register">
            <div><span  @click="click_login">已有账号?去登录</span></div>
        </div>
        <button type="submit" class="button__submit">注册</button>
    </form>
    
</template>

<style scoped lang="scss">


.form__row{
    margin-top: 20px;
    .form__plot{
        display: flex;
        justify-content: space-between;
        .form__label{
            text-align: left;
            flex: 1;
        }
    }
    
    .form__auth_code{
        display: flex;
        .code__btn{
            height: 50px;
            width: 100px;
            .btn{
                height: 100%;
                width: 100%;
            }
        }
    }
}

.button__submit {
        height: 50px;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 50px;
        border: none;
        font-size: 14px;
        color: #fff;
        background-color: var(--wchime-color-highlight);
        opacity: 0.8;
        border-radius: 6px;
    }
.button__submit:focus,
.button__submit:hover {
    opacity: 1;
    outline: none;
}

:deep(.el-input__wrapper) {
    padding: 1px 17px;
    font-size: 12px;
    box-shadow: 0 0 0 1px #e3e4e8 inset;
    border-radius: 5px;
}
:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px var(--wchime-color-highlight) inset;
}
:deep(.el-input__inner) {
    height: 50px;
    line-height: 50px;
    color: #282828;
}

.register{
    margin-top: 10px;
    width: 100%;
    text-align: left;
    user-select: none;
    span{
        cursor: pointer;
    }
    
}
.register span:hover{
    color: var(--wchime-color-hover-highlight);
}


</style>